<template>
    <div class="FooterMusic" >
        <div class="footerleft"  >
             <img :src="playList[playListIndex].al.picUrl" alt="" class="gequimg" @mousedown="updateDetailShow">
             
            <div>
               <p class="geming"> {{playList[playListIndex].name}}</p>
            </div>
            <div class="BIGtubiao">
                <div>
                <img src="../../image/shangyiqu.png" alt="" class="tubiao1"  @click="goPlay(-1)">
                </div>
                <div>
                <img src="../../image/bofang.png" alt="" class="tubiao2" @click="play" v-if="isbtnShow">
                <img src="../../image/zanting.png" alt="" class="tubiao2" @click="play" v-else >
                </div>
                <div>
                <img src="../../image/xiayiqu.png" alt="" class="tubiao3" @click="goPlay(1)">
                </div>
            </div>
             <audio ref="audio"
              :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`">
              </audio>
              <el-drawer v-model="detailShow"  direction="btt" size="100%" :with-header="false" >
                 <Musicpro :musicList="playList[playListIndex]" :play="play" :isbtnShow="isbtnShow" :addDuration="addDuration"/>
            </el-drawer>
        </div>
    </div>
</template>
<script>
import {mapMutations, mapState} from 'vuex'
import Musicpro from '../Musicpro.vue'
export default {
    data(){
   return{
    interVal:0
   }
    },
 computed:{
    ...mapState(['playList','playListIndex' ,'isbtnShow','detailShow']),
 },
 mounted(){
    console.log(this.$refs);
    this.$store.dispatch("getLyric",this.playList[this.playListIndex].id)
    // this.updateTime()
 },  
 updated(){
    this.$store.dispatch("getLyric",this.playList[this.playListIndex].id)
    this.addDuration()
 },
 methods:{
    goPlay:function(num){
       let index=this.playListIndex+num
       if(index<0){
        index=this.playList.length-1
       }else if(index==this.playList.length){
        index=0
       }
       this.updatePlayListIndex(index)
  },
    play:function(){
        //判断音乐是否播放
        if(this.$refs.audio.paused){
     this.$refs.audio.play();
     console.log(this.playList[this.playListIndex]);
     this.updateIsbtnShow(false)
     this.updateTime()//播放就传值
        }
        else{
            this.$refs.audio.pause();
            this.updateIsbtnShow(true)
            clearInterval(this.interVal)//暂停清楚
        }
    },
    addDuration:function(){
         this.updateDuration(this.$refs.audio.duration)
    },
    updateTime:function(){
          this.interVal=setInterval(()=>{
          this.updateCurrentTime(this.$refs.audio.currentTime)
          },1000)
    },
    ...mapMutations(['updateIsbtnShow','updateDetailShow','updateCurrentTime',"updatePlayListIndex","updateDuration"])
 },
 watch:{
    playListIndex:function(){//监听下标发生变化，自动放音乐
        this.$refs.audio.autoplay=true;
        if(this.$refs.audio.paused){
            this.updateIsbtnShow(false)
        }
    },
    playList:function(){
        if(this.isbtnShow){
            this.$refs.audio.autoplay=true;
            this.updateIsbtnShow(false)
        }
    }
 },
 components:{
    Musicpro
 }
};
</script>
<style scoped>
.FooterMusic{
    z-index: 3;
    width: 100%;
    height: 90px;
    background-color:rgba(255, 244, 244, 0.2);
    position: fixed;
    bottom: 0;
    border-top: 2px solid hotpink;
    margin-bottom: 5px;
}
.BIGtubiao{
    margin-top: 5px;
    display: flex;
     margin-left: 360px;
    margin-right: auto;
     flex-direction: row;
}
.tubiao1{
     width: 70px;
    height: 70px;
}
.tubiao2{
    padding-left: 30px;
    width: 66px;
    height: 66px;
}
.tubiao3{
     padding-left: 30px;
     width: 70px;
    height: 70px;
}
.footerleft{
    padding: 0px 50px;
    padding: 10px;
    display: flex;
}
.gequimg{
    margin-left: 10px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.footerright{
    margin-right: 25px;
}
.geming{
    font-size: 30px;
    color: rgb(24, 87, 169);
    margin-left: 60px;
    margin-top: 15px;
}
.drawer{
    padding: 0px;
}
</style>